<html>
<head>
  <link rel="stylesheet" href="../../lay/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lay/style/admin.css" media="all">
  <link rel="stylesheet" href="../../lay/style/yogee.css" media="all">
  <script src="../../lay/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <form class="layui-form-item">
        <div class="layui-inline">

        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-list search-btn" type="button">搜索</button>
          <a class="layui-btn layuiadmin-btn-list layui-btn-normal export"
             href="/page/oa/categoryForm.html">新增</a>
        </div>
      </form>
    </div>
    <div class="layui-card-body">
      <table id="table" lay-filter="table"></table>
    </div>
  </div>
</div>
<script type="text/html" id="toolBar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../../util/httpUtil.js"></script>
<script src="../../util/moment.min.js"></script>
<script type="text/javascript">
  layui.use(['table', 'element', 'jquery', 'form', 'layer'], function () {
    var $ = layui.$;
    var layer = layui.layer; //弹层
    var table = layui.table;

    var dataTable = table.render({
      elem: '#table',
      url: BASE_URL + '/oa/category/list', //数据接口,
      where: {},
      page: true, //开启分页,
      autoSort: false,
      limit: 15,
      request: {
        pageName: 'currentPage',  //页码的参数名称
        limitName: 'pageSize' //每页数据量的参数名
      },
      parseData: function (res) { //res 即为原始返回的数据
        return {
          "status": res.state, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records //解析数据列表
        };
      },
      cols: [[ //表头
        {type: 'checkbox'},
        {field: 'id', title: '分类id'},
        {field: 'name', title: '分类名称'},
        {
          field: 'createdAt', title: '创建时间', templet: function (d) {
            return moment(d.createdAt).format("YYYY-MM-DD HH:mm:ss");
          }
        },
        {align: 'center', toolbar: '#toolBar', title: '操作'}
      ]]
    });

    //搜索功能
    $('.search-btn').click(function () {
      var index = layer.msg('查询中，请稍候...', {icon: 16, time: false, shade: 0});
      dataTable.reload({
        where: {
          name: $("name").val()
        }
      });
      layer.close(index);
    });

    //表格操作监听
    table.on('tool(table)', function (obj) {
      var data = obj.data, //获得当前行数据
              layEvent = obj.event; //获得 lay-event 对应的值
      if (layEvent === 'del') {
        layer.confirm('确定要删除吗', function (index) {
          obj.del(); //删除对应行（tr）的DOM结构
          layer.close(index);
          //向服务端发送删除指令
          HTTPUtil.post('/oa/category/del', {cateId: data.id})
                  .then(function (json) {
                    if (json.state === 'success') {
                      layer.msg('删除成功', {icon: 1, time: 1000});
                    } else {
                      layer.msg(json.msg, {icon: 2});
                    }
                  })
        });
      } else if (layEvent === 'edit') {
        window.location.href = 'postForm.html?id=' + data.id;
      }
    });
  });
</script>
</body>
</html>
